<template>
  <zm-view ref="view">
    <zm-navbar z-index="12" is-back back-icon-color="#fff" :border-bottom="false" :background="useColor('theme')" @height="onNavbarHeight">
      <view class="flex items-center">
        <u-search placeholder="搜索影片、影院" :show-action="false" height="62rpx" disabled @click="toView('pages/main/search-list/search-list')"></u-search>
      </view>
    </zm-navbar>
    <view class="header-bg"> </view>
    <view class="header-wrap" :style="{ top: navbarHeihgt + 'px' }">
      <view class="pr-15 font-32 text-666 transition hot" :class="{ 'is-active': tab === 'hot' }" @click="onClickTab('hot')">正在热映</view>
      <view class="pl-15 font-32 text-666 transition" :class="{ 'is-active': tab === 'pre' }" @click="onClickTab('pre')">即将上映</view>
    </view>
    <view class="content-wrap" :style="{ marginTop: swiperHeight + 'px' }">
      <view class="film-list-vertical">
        <view :style="[listStyle('hot')]" class="swiper-item-content-hot radius-16 grid grid-cols-1 gap-y-20">
          <view v-for="(item, index) in hotFilms" :key="index">
            <film-card-horizontal :data="item"></film-card-horizontal>
          </view>
        </view>
        <view :style="[listStyle('pre')]" class="swiper-item-content-pre radius-16 grid grid-cols-1 gap-y-20">
          <view v-for="(item, index) in Object.keys(preFilmsGroup)" :key="index">
            <view class="font-34 font-bold my-24"> {{ item }}</view>
            <view v-for="(film, idx) of preFilmsGroup[item]" :key="idx">
              <film-card-horizontal :data="film" form="pre"></film-card-horizontal>
            </view>
          </view>
        </view>
      </view>
    </view>
    <zm-empty v-if="(swiperIndex == 0 && hotFilms.length == 0) || (swiperIndex == 1 && hotFilms.preFilms == 0)" text="暂无影片"></zm-empty>
    <!-- 电影预告播放组件 -->
    <film-trailer-popup></film-trailer-popup>
  </zm-view>
</template>

<script>
import { formatDate } from "@/utils/date"
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { formatDayDateDescs } from "@/utils/date"
export default {
  mixins: [page, hook],
  data() {
    return {
      navbarHeihgt: 0,
      swiperHeight: 52,
      tab: "hot",
      list: [],
      hotFilms: [],
      preFilms: [],
      preFilmCount: [],
      swiperIndex: 0
    }
  },
  computed: {
    listStyle() {
      return (type) => {
        return {
          display: this.tab == type ? "grid" : "none"
        }
      }
    },
    preFilmsGroup() {
      return this.groupByFilmDate(this.preFilms)
    }
  },
  onLoad(options) {
    this.tab = options.type || "hot"
    this.handleInit()
    this.onClickTab(this.tab)
  },
  onShow() {
    this.handleGetHotFilm()
    this.handleGetPreFilm()
  },
  methods: {
    async handleInit() {
      const rect = await this.useRect(".header-wrap")
      if (rect) {
        this.swiperHeight = rect.height
      }
    },
    onNavbarHeight(height) {
      this.navbarHeihgt = height
    },
    async handleGetHotFilm() {
      uni.$loading(true)
      const list = await uni.$api.film.getHotFilmList()
      uni.$loading(false)
      this.hotFilms = list.map((item) => {
        return { ...item, versions: item.version?.split(",") || [] }
      })
      this.list = this.hotFilms
    },
    async handleGetPreFilm() {
      uni.$loading(true)
      const res = await uni.$api.film.getPreFilmList({ pageSize: "100", preDate: formatDate(new Date()) })
      if (res?.list) {
        res.list.sort((a, b) => new Date(a.publishDate) - new Date(b.publishDate))
        // const dates = [...new Set(res.list.map((item) => item.publishDate))]
        uni.$loading(false)
        this.preFilms = res.list.map((item) => {
          return { ...item, versions: item.version?.split(",") || [] }
        })
        this.preFilmCount = res.count
      }
    },
    // 根据日期分组
    groupByFilmDate(arr) {
      return arr.reduce((groups, item) => {
        const dateDesc = formatDayDateDescs(item.publishDate)
        if (!groups[dateDesc]) {
          groups[dateDesc] = []
        }
        groups[dateDesc].push(item)
        return groups
      }, {})
    },
    onClickTab(type) {
      uni.$emit("filmTypeChanged", type)
      this.tab = type
      if (type === "hot") {
        this.list = this.hotFilms
        this.swiperIndex = 0
      }
      if (type === "pre") {
        this.list = this.preFilms
        this.swiperIndex = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bg {
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 220rpx;
  position: fixed;
  background-color: var(--theme-color);
}
.header-wrap {
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  position: fixed;
  margin-top: 30rpx;
  padding: 30rpx 24rpx;
  border-radius: 16rpx 16rpx 0 0;
  background-color: var(--page-color);
  .is-active {
    color: #333333;
    font-weight: bold;
  }
  .hot {
    position: relative;
    &::after {
      top: 50%;
      right: 0;
      content: "";
      width: 1rpx;
      height: 18rpx;
      position: absolute;
      transform: translateY(-50%);
      background-color: #cccccc;
    }
  }
}
.content-wrap {
  z-index: 9;
  overflow: hidden;
  position: relative;
  margin-top: 24rpx;
  padding: 30rpx 24rpx;

  .film-list-vertical {
    border-radius: 16rpx;
    .film-item {
      display: flex;
      margin-top: 20rpx;
      align-items: center;
      padding: 30rpx 20rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .film-version {
        top: 8rpx;
        left: 8rpx;
        z-index: 1;
        display: flex;
        padding: 0 6rpx;
        font-size: 18rpx;
        color: #ffffff;
        font-weight: bold;
        position: absolute;
        border-radius: 4rpx;
        align-items: center;
        background-color: #000000;
      }
      .play-btn {
        z-index: 1;
        right: 12rpx;
        bottom: 12rpx;
        width: 46rpx;
        height: 46rpx;
        display: flex;
        position: absolute;
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
</style>
